<template>
  <div class="config-panel-container">
    <el-tabs :active-name="activeTab" style="overflow: hidden; width: 100%">
      <el-tab-pane :label="'组件设置'" name="1">
        <el-scrollbar
          class="setting-scrollbar"
          :style="{ height: scrollerHeight }"
        >
          <UnitSetting :designer="designer" />
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane v-if="designer.designStatus" :label="'表单设置'" name="2">
        <el-scrollbar
          class="setting-scrollbar"
          :style="{ height: scrollerHeight }"
        >
          <FormSetting :designer="designer" />
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
/* eslint-disable vue/require-default-prop */
// import CodeEditor from "@/components/code-editor/index";
import FormSetting from "./form-setting";
import UnitSetting from "./unit-setting";
import { addWindowResizeHandler } from "Yan/utils/util";

export default {
  name: "SettingPanel",
  componentName: "SettingPanel",
  components: {
    // CodeEditor,
    UnitSetting,
    FormSetting,
  },
  props: {
    designer: Object,
  },
  // provide() {
  //   return {
  //     isSubFormChildWidget: () => this.subFormChildWidgetFlag,
  //   };
  // },
  inject: ["getDesignerConfig"],
  data() {
    return {
      designerConfig: this.getDesignerConfig(),
      scrollerHeight: 0,
      activeTab: "2",
    };
  },
  computed: {
    // optionModel: {
    //   get() {
    //     return this.selectedWidget.options;
    //   },
    //   set(newValue) {
    //     this.selectedWidget.options = newValue;
    //   },
    // },
  },
  watch: {
    "designer.selectedId": {
      handler(val) {
        // console.log("cfg p", val);
        if (val) this.activeTab = "1";
        else this.activeTab = "2";
      },
    },

    "selectedWidget.options": {
      // 组件属性变动后，立即保存表单JSON！！
      deep: true,
      handler() {
        this.designer.saveCurrentHistoryStep();
      },
    },

    formConfig: {
      deep: true,
      handler() {
        this.designer.saveCurrentHistoryStep();
      },
    },
  },
  created() {},
  mounted() {
    if (!this.designer.selectedId) this.activeTab = "2";
    else this.activeTab = "1";
    const a = document.querySelector(".formDesignConfig");
    if (a) this.scrollerHeight = a.clientHeight - 55 + "px";
    addWindowResizeHandler(() => {
      this.$nextTick(() => {
        const a = document.querySelector(".formDesignConfig");
        if (a) this.scrollerHeight = a.clientHeight - 55 + "px";
      });
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.config-panel-container {
  padding: 0 8px;
}

.setting-scrollbar {
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden; /* IE浏览器隐藏水平滚动条箭头！！ */
  }
  ::v-deep .el-scrollbar__bar.is-vertical {
    width: 0 !important;
    display: none !important;
  }
}

.setting-collapse {
  ::v-deep .el-collapse-item__content {
    padding-bottom: 6px;
  }

  ::v-deep .el-collapse-item__header {
    font-style: italic;
    font-weight: bold;
  }
}

.setting-form {
  ::v-deep .el-form-item__label {
    font-size: 13px;
    //text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  ::v-deep .el-form-item--mini.el-form-item {
    margin-bottom: 6px;
  }
}

/* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
::v-deep .hide-spin-button input::-webkit-outer-spin-button,
::v-deep .hide-spin-button input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

/* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
::v-deep .hide-spin-button input[type="number"] {
  -moz-appearance: textfield;
}

::v-deep .custom-divider.el-divider--horizontal {
  margin: 10px 0;
}

::v-deep .custom-divider-margin-top.el-divider--horizontal {
  margin: 20px 0;
}

.small-padding-dialog {
  ::v-deep .el-dialog__body {
    padding: 6px 15px 12px 15px;
  }
}
</style>
